<template>
	<view>
		<view class="title">登录/注册</view>
		<view class="inyzm">请输入验证码</view>
		<view class="yzm">
			<view>
				<text>{{yzms[0]}}</text>
				<text>{{yzms[1]}}</text>
				<text>{{yzms[2]}}</text>
				<text>{{yzms[3]}}</text>
			</view>
			<view class="input" @click="getfocus">
				<input type="number" maxlength="4" :focus='focusShow' @blur="getblur" @input='onIn'>
			</view>
		</view>
	</view>
</template>

<script>
	import { reactive,toRefs} from 'vue'
	import store from '../../../store/index.js'
	export default {
		setup(){
			let data = reactive({
				yzms:[],
				zt:0,
				focusShow:false,
				tz:()=>{
					if(data.zt==1){
						uni.reLaunch({
							url: '/pages/wxz/sdq/sdq'
						});
					}else{
						uni.redirectTo({
							url: '/pages/wxz/register/register'
						});
					}
				},
				onIn:(e)=>{
					let list=e.detail.value.split('')
					data.yzms=list
					if(e.detail.value==store.getters.yzmget){
						data.tz()
					}
				},
				getfocus:()=>{
					data.focusShow=true
				},
				getblur:()=>{
					data.focusShow=false
				}
			})
			return {...toRefs(data)}
		},
		onShow:function(){
			wx.showToast({
			  title: '验证码为：'+store.getters.yzmget,
			  icon: 'none',
			  duration: 5000
			})
			this.zt=store.getters.Getzt
		}
	}
</script>

<style scoped lang="less">
.title{
	margin-top: 100rpx;
	font-size: 50rpx;
}
.inyzm{
	margin-top: 30rpx;
	margin-bottom: 200rpx;
}
.yzm{
	position: relative;
}
.yzm>view{
	display: flex;
	justify-content: space-evenly;
	text{
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		font-size: 70rpx;
		text-align: center;
		border: 1px solid #D9D9D9;
	}
}
.yzm>.input{
	position: absolute;
	width: 620rpx;
	margin-left: 60rpx;
	top: 0;
	height: 100rpx;
	input{
		width: 0rpx;
		height: 0rpx;
	}
}
</style>
